<template>
    <header>
        <div class="l-content">
            <i style="font-size: 25px;" class="el-icon-s-fold" @click="handleMenu"></i>
        </div>
        <div class="r-content">
            <el-dropdown class="avatar-container" trigger="click" @command="handleCommand">
                <span class="avatar-wrapper">
                    <el-image :src="avatar" class="user-avatar"></el-image>
                    <i class="el-icon-caret-bottom" />
                </span>
                <el-dropdown-menu slot="dropdown">
                    <!-- <el-dropdown-item command="1">个人信息</el-dropdown-item>
           <el-dropdown-item command="2">修改密码</el-dropdown-item> -->
                    <el-dropdown-item command="3">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </header>
</template>


<script>
    import { deleteCookie } from '@utils/cookies'
    export default {
        data() {
            return {
                avatar: require('@/assets/img/pic.jpg')
            };
        },
        methods: {
            handleCommand() {
                deleteCookie('sm-isLogin-cookies')
                this.$router.push('/loginone')
            },
            dialogFormVisible() {
                this.$router.push('/identifyinfo')
            },
            handleMenu() {
                this.$store.commit("collapseMenu");
            }
        }
    };
</script>

<style>
    .l-content {
        margin-right: 20px;
        margin-top: 20px;
        float: left;
    }

    .r-content {
        float: right;
    }

    .r-content .user-avatar {
        width: 40px;
        height: 40px;
        margin-top: 10px;
        border-radius: 20%;
    }
</style>